<template>
  <div class="my_screen_page shui_wu_ju">

    <my-header title="广西税务局" />

    <div class="mt20 pl20 pr20 df jcsb">
      <!-- 左边 -->
      <div class="w760">
        <div class="area_block_1">

          <!-- 产业开票金额 -->
          <div>

            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">产业开票金额</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <div class="scroll_box_4_1">
              <ul class="jian_list_box">
                <!-- <vue3SeamlessScroll :list="list1" :hover="true" :step="0.3"> -->


                <li class="item_jian_box" v-for="(item, index) in 3" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">亿元</span>
                    </div>
                    <div class="w120 cor_EF0 text_font_DIN fz24">-5.65%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <!-- </vue3SeamlessScroll> -->
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">亿元</span>
                    </div>
                    <div class="w120 cor_00F text_font_DIN fz24">____%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

          </div>

          <!-- 行业开票金额 -->
          <div class="mt40">

            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">行业开票金额</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <div class="scroll_box_4_2">
              <ul class="jian_list_box">
                <!-- <vue3SeamlessScroll :list="list1" :hover="true" :step="0.3"> -->


                <li class="item_jian_box" v-for="(item, index) in 7" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">亿元</span>
                    </div>
                    <div class="w120 cor_EF0 text_font_DIN fz24">-5.65%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <!-- </vue3SeamlessScroll> -->
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">亿元</span>
                    </div>
                    <div class="w120 cor_00F text_font_DIN fz24">____%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

          </div>

        </div>
      </div>

      <!-- 中边 -->
      <div class="w960">
        <div class="area_block_2">

          <!-- 税收收入 -->
          <div>
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">税收收入</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <ul class="taxation_list_box">
              <li class="item_taxation">
                <div class="fz16 lh20 cor_fff tac">税收收入</div>
                <div class="mt10 df aic jcc">
                  <div class="df aic"><span class="fz24 text_font_DIN">3452.8</span><span class="ml5 fz14 cor_777">亿元</span><span class="ml30 fz24 cor_00F text_font_DIN">12%</span></div>
                </div>
                <div class="mt15 chart_size_taxation">
                  <chart-line-one :chartData="lineData4"></chart-line-one>
                </div>
              </li>
              <li class="item_taxation" v-for="(item, index) in 5" :key="index">
                <div class="fz16 lh20 cor_fff tac">中央级</div>
                <div class="mt10 df aic jcc">
                  <div class="df aic"><span class="fz24 text_font_DIN">____</span><span class="ml5 fz14 cor_777">亿元</span><span class="ml30 fz24 cor_00F text_font_DIN">____%</span></div>
                </div>
                <div class="mt15 chart_size_taxation">
                  <chart-line-one :chartData="lineData4"></chart-line-one>
                </div>
              </li>
            </ul>

          </div>

          <!-- 税收收入累计趋势图 -->
          <div class="mt40">
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">税收收入累计趋势图</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="chart_size_shui_1">
              <chart-bar-or-line-two :chartData="lineData1"></chart-bar-or-line-two>
            </div>
          </div>

          <!-- 2023-2024年税收收入月度累计增速图(对比外省) -->
          <div class="mt35">
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">2023-2024年税收收入月度累计增速图(对比外省)</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="chart_size_shui_1">
              <chart-line-two :chartData="lineData2"></chart-line-two>
            </div>
          </div>

        </div>
      </div>


      <!-- 右边 -->
      <div class="w760">
        <div class="area_block_1">

          <!-- 涉税企业户数 -->
          <div>
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">涉税企业户数</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="scroll_box_4_3">
              <ul class="jian_list_box">
                <!-- <vue3SeamlessScroll :list="list1" :hover="true" :step="0.3"> -->


                <li class="item_jian_box" v-for="(item, index) in 3" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">亿元</span>
                    </div>
                    <div class="w120 cor_EF0 text_font_DIN fz24">-5.65%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <!-- </vue3SeamlessScroll> -->
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">亿元</span>
                    </div>
                    <div class="w120 cor_00F text_font_DIN fz24">____%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <!-- 分地市税收收入 -->
          <div class="mt40">
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">分地市税收收入</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="scroll_box_4_4">
              <ul class="jian_list_box">
                <!-- <vue3SeamlessScroll :list="list1" :hover="true" :step="0.3"> -->


                <li class="item_jian_box" v-for="(item, index) in 7" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">亿元</span>
                    </div>
                    <div class="w120 cor_EF0 text_font_DIN fz24">-5.65%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <!-- </vue3SeamlessScroll> -->
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">亿元</span>
                    </div>
                    <div class="w120 cor_00F text_font_DIN fz24">____%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </div>


    </div>
  </div>
</template>

<script setup>

import { ref, reactive } from 'vue';
import MyHeader from '../components/my-header.vue';
import chartLineOne from '@/components/chartLineOne.vue';
import chartBarOrLineTwo from '@/components/chartBarOrLineTwo.vue';
import chartLineTwo from '@/components/chartLineTwo.vue';

const lineData4 = reactive({
  names: ['耗能'],
  datas: [[65, 126, 57, 110, 129, 150, 91, 152]],
  dataX: [1,2,3,4,5,6,7,8],
  cell: '耗能',
  colorList: ['rgba(0, 240, 247, 1)']
});

const lineData1 = reactive({
  datas:[
    [2,6,4,7,2,5,8,4,7,2,5,8],
    [5,6,4,7,2,4,6,4,7,2,4,6]
  ],
  dataX: ['2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月'],
});

const lineData2 = reactive({
  names: ['广西', '云南', '湖南'],
  datas: [
    [2,6,4,7,2,5,8,4,7,2,5,8],
    [5,6,4,7,2,4,6,4,7,2,4,6],
    [10,2,6,2,5,8,3,5,2,6,10,12]
  ],
  dataX: ['2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月', '2023年1-2月'],
})

</script>
position: relative;
    height: 408px;
    overflow: hidden;
    margin-top: 24px;
<style lang="scss" scoped>

.shui_wu_ju {

  .scroll_box_4_1,.scroll_box_4_2,.scroll_box_4_3,.scroll_box_4_4 {
    
  }

  .scroll_box_4_2,.scroll_box_4_4 {
    height: 824px;
  }

    .jian_list_box {
      position: relative;
  
      .item_jian_box {
        position: relative;
        padding: 0 16px;
        height: 96px;
        color: #fff;
        font-size: 16px;
        background: rgba(2, 20, 37, 0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43, 141, 191, 0.6);
        border-radius: 8px;
        margin-bottom: 8px;
  
        .chart_mini_size {
          position: relative;
          width: 200px;
          height: 64px;
        }
      }
    }

    .jian_list_box_2 {
      position: relative;
  
      .item_jian_box_2 {
        position: relative;
        padding: 0 16px;
        height: 112px;
        color: #fff;
        font-size: 16px;
        background: rgba(2, 20, 37, 0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43, 141, 191, 0.6);
        border-radius: 8px;
        margin-bottom: 6px;
  
        .chart_mini_size_2 {
          position: relative;
          width: 200px;
          height: 80px;
        }
      }
    }

    .jian_list_box_3 {
      position: relative;
  
      .item_jian_box_3 {
        position: relative;
        padding: 0 16px;
        height: 96px;
        color: #fff;
        font-size: 16px;
        background: rgba(2, 20, 37, 0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43, 141, 191, 0.6);
        border-radius: 8px;
        margin-bottom: 6px;
  
        .chart_mini_size_3 {
          position: relative;
          width: 200px;
          height: 64px;
        }
      }
    }

    .jian_list_box_2 {
      position: relative;
  
      .item_jian_box_2 {
        position: relative;
        padding: 0 16px;
        height: 112px;
        color: #fff;
        font-size: 16px;
        background: rgba(2, 20, 37, 0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43, 141, 191, 0.6);
        border-radius: 8px;
        margin-bottom: 6px;
  
        .chart_mini_size_2 {
          position: relative;
          width: 200px;
          height: 80px;
        }
      }
    }

    .taxation_list_box {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 4px;
      .item_taxation {
        position: relative;
        padding: 16px 16px 0;
        width: 286px;
        height: 144px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        background: rgba(2,20,37,0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43,141,191,0.6);
        border-radius: 8px;
        margin-top: 20px;
        .chart_size_taxation {
          position: relative;
          width: 100%;
          height: 42px;
        }
      }
    }

    .chart_size_shui_1 {
      position: relative;
      width: 100%;
      height: 440px;
    }

    
}

</style>